import { CSS } from '@dnd-kit/utilities'

/** 拖拽时显示的组件 */
const Drag = ({ item, transform, transition }) => {
  if (!item) {
    return null
  }

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    position: 'fixed',
    zIndex: 100,
    width: 150,
    padding: 8,
    border: '1px solid #e8e8e8',
    borderRadius: 4,
    backgroundColor: '#fff',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
    pointerEvents: 'none',
    cursor: 'grabbing',
  }

  return (
    <div style={style}>
      <div className='flex items-center'>
        {item.icon}
        <span style={{ marginLeft: 8 }}>{item.title}</span>
      </div>
    </div>
  )
}

export default Drag
